<template>
    <div class="member" v-if="!isLogin">
        <div class="header-con">
            <div class="user-info">
                <!-- ⽤户信息 -->
                <div class="avatar-con">
                    <div class="avatar">
                        <img src="../../public/images/user.png" class="imageinfo" />
                    </div>
                </div>
                <div class="person-con">
                    <span>
                        <router-link to="/login" class="mui-navigate-right" style="color: white">登录</router-link>
                        /
                        <router-link to="/register" class="mui-navigate-right" style="color: white">注册</router-link>
                    </span>
                </div>
            </div>
        </div>
    </div>
    <div class="member" v-if="isLogin">
    <div class="header-con">
        <div class="user-info">
            <!-- ⽤户信息 -->
            <div class="avatar-con">
                <div class="avatar">
                    <img src="../../public/images/user.png" class="imageinfo" />
                </div>
            </div>
            <div class="person-con">
                <span>{{ username }}</span>
            </div>
        </div>
    </div>
<div>
<van-cell
is-link
style="--van-cell-line-height: 48px"
v-for="(menu, index) in userMenu"
:key="index"
:to="menu.path"
@click="handle(menu)"
>
<template #title>
<span class="custom-title">{{ menu.name }}</span>
</template>
<template #icon>
<van-image width="48px" height="48px" :src="menu.img">
</van-image>
</template>
</van-cell>
</div>
</div>
</template>
<script setup>
const handle = async (menu) => {
//退出登录
if (menu.name == '退出登录') {
//发出退出登录请求
const res = await logout()
//退出成功
if (res.code == 2) {
//清除前端cookie数据
Cookies.remove('username')
Cookies.remove('userid')
Cookies.remove('Token')
//设置登录状态
isLogin.value = false
showNotify({
message: '退出登录成功'
 })
 }
 }
}
import { ref } from 'vue'
import Cookies from 'js-cookie'
import { logout } from '@/api/login'
import { showNotify } from 'vant'
let isLogin = ref()
let username = ref()
let userMenu = ref([
 { name: '我的订单', img: '../../public/images/user.png', path: '/home' },
 { name: '收获地址', img: '../../public/images/user.png', path: '' },
 { name: '退出登录', img: '../../public/images/user.png', path: '' }
])
username.value = Cookies.get('username')
if (username.value != null) {
isLogin.value = true
}
</script>
<style lang="scss" scoped>
.member {
margin-bottom: 15px;}
.header-con {
padding: 10px;
background-color: #fff;}
.user-info {
position: relative;
overflow: hidden;
width: 100%;
height: 120px;
background: linear-gradient(90deg,#28a2ff,#ffd787);
box-shadow: 0 0.1rem 0.25rem #f8e3c6;}
.avatar-con {
position: absolute;
left: 15px;
top: 50%;
transform: translateY(-50%);}
.avatar {
width: 60px;
height: 60px ;
overflow: hidden ;
box-shadow: 0 2px 10px rgba(0,0,0,15);
border: 1px solid hsla(0,0%,100%,.4); 
border-radius: 50% 50% ;}
.image-info {
width: 100% ;
height: 100%;
}
.person-con {
position: absolute;
left: 90px;
top: 50%;
transform: translateY(-50%) ;
color: #fff;
}
</style>